<template>
  <div class="part_div">
    <component :is="importCom.c" ref="netEcharts" :para="getCom(index).comData" v-if="getCom(index)"></component>
  </div>
</template>

<script>
  export default {
    name: 'get-component',
    props: {
      index: {},
      componentsArr: []
    },
    computed: {
      importCom () {
        let me = this
        console.log(me.getCom(this.index).route)
        //当配置页选择不同的路由时，无法监听到c属性，即import（）函数的变化，所以无法进入此方法，也就无法达到实时改变组件的效果
        //为返回值增加一个无用的r属性，r属性的作用只有一个：保证当route值改变时，此方法体可以被调用
        return { c: () => import('../' + me.getCom(this.index).route), r: this.route }
      }
    },
    data () {
      return {
        route: ''
      }
    },
    methods: {
      getCom (index) {
        if(index<=this.componentsArr.length){
          let comObj = this.componentsArr[index - 1]
          this.route = comObj.route
          return {
            comName: comObj.name,
            comData: comObj.data,
            route: comObj.route,
          }
        }else{
          return null
        }

      }
    }
  }
</script>

<style scoped>
  .part_div {
    height: 100%
  }
</style>
